<!-- 可付款的采购入库单列表 -->
<template>
  <Dialog title="选择产品" v-model="dialogVisible" :appendToBody="true" :scroll="true" width="1080">
    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item prop="classify">
          <el-select
            v-model="queryParams.classify"
            clearable
            filterable
            placeholder="请选择分类"
            class="!w-240px"
          >
            <el-option
              v-for="item in classifyList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="materialSource">
          <el-select
            v-model="queryParams.materialSource"
            clearable
            filterable
            placeholder="请输入产品名称/编号"
            class="!w-240px"
          >
            <el-option
              v-for="item in materialSourceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="spec">
          <el-input
            v-model="queryParams.spec"
            placeholder="请输入产品规格"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item prop="productAttributes">
          <el-input
            v-model="queryParams.productAttributes"
            placeholder="请输入产品属性"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item prop="remark">
          <el-input
            v-model="queryParams.remark"
            placeholder="请输入备注"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>

    <ContentWrap>
      <el-table
        v-loading="loading"
        :data="list"
        :show-overflow-tooltip="true"
        :stripe="true"
      @current-change="handleSelectionChange"
      >
        <el-table-column width="50" align="center">
          <template #default="{ row }">
             <el-radio v-model="currentRowId" :label="row.id" class="hidden-label-radio" />
          </template>
        </el-table-column>
        <el-table-column
          min-width="120"
          label="产品编号"
          sortable
          align="center"
          prop="productCode"
        />
        <el-table-column label="产品图" align="center" prop="productImg" width="80">
          <template #default="scope">
            <el-image :src="scope.row.productImg" style="width: 50px; height: 50px" fit="cover">
              <template #error>
                <div class="image-error">
                  <el-icon><icon-picture /></el-icon>
                </div>
              </template>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="产品分类" align="center" prop="categoryName" width="120" />
        <el-table-column label="产品名称" align="center" prop="productName" min-width="140" />
        <el-table-column label="当前库存-基本单位" align="center" prop="currentStock" width="120" />
        <el-table-column
          label="占用库存-基本单位"
          align="center"
          prop="occupiedStock"
          width="120"
        />
        <el-table-column label="备注" align="center" prop="remark" min-width="140" />
        <el-table-column label="基本单位" align="center" prop="unitName" width="120" />
      </el-table>
      <!-- 分页 -->
      <Pagination
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNo"
        :total="total"
        @pagination="getList"
      />
    </ContentWrap>
    <template #footer>
      <el-button type="primary" @click="openForm('create')"> 新增产品 </el-button>
      <el-button :disabled="!currentRowId" type="primary" @click="saveSelection"> 确 定 </el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
    <StockInForm ref="formRef" @success="getList" />
</template>
<script lang="ts" setup>
import { ElTable } from 'element-plus'
import { dateFormatter2 } from '@/utils/formatTime'
import { erpPriceInputFormatter, erpPriceTableColumnFormatter } from '@/utils'
import { ProductApi, ProductVO } from '@/api/erp/product/product'
import { PurchaseInApi, PurchaseInVO } from '@/api/erp/purchase/in'
import StockInForm from '@/views/erp/stock/in/StockInForm.vue'
defineOptions({ name: 'PurchaseInPaymentEnableList' })

const list = ref<PurchaseInVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const loading = ref(false) // 列表的加载中
const dialogVisible = ref(false) // 弹窗的是否展示
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  classify: undefined,
  materialSource: undefined,
  IsBOM: undefined,
  spec: undefined,
  materialName: undefined,
  vendorName: undefined,
  model: undefined,
  paymentEnable: true,
  supplierId: undefined
})

const currentRowId = ref<number | null>(null)
const queryFormRef = ref() // 搜索的表单
const productList = ref<ProductVO[]>([]) // 产品列表
const mockProductList = [
  {
    id: 1,
    productCode: 'P001',
    productImg: 'https://example.com/img1.jpg',
    categoryName: '电子产品',
    productName: '高清显示屏',
    currentStock: 120,
    occupiedStock: 15,
    remark: '适用于高端工作站',
    unitName: '个'
  },
  {
    id: 2,
    productCode: 'P002',
    productImg: 'https://example.com/img2.jpg',
    categoryName: '电子元件',
    productName: '32GB内存条',
    currentStock: 85,
    occupiedStock: 20,
    remark: 'DDR4规格',
    unitName: '条'
  },
  {
    id: 3,
    productCode: 'P003',
    productImg: 'https://example.com/img3.jpg',
    categoryName: '办公用品',
    productName: '机械键盘',
    currentStock: 75,
    occupiedStock: 10,
    remark: '青轴手感',
    unitName: '个'
  },
  {
    id: 4,
    productCode: 'P004',
    productImg: 'https://example.com/img4.jpg',
    categoryName: '电脑配件',
    productName: '1TB固态硬盘',
    currentStock: 40,
    occupiedStock: 5,
    remark: '高速NVMe接口',
    unitName: '个'
  }
]
/** 选中操作 */
const selectionList = ref<PurchaseInVO[]>([])
const handleSelectionChange = (row) => {
  if (row) {
    currentRowId.value = row.id
  }
}
const formRef = ref()
const openForm = (type: string, id?: number) => {
  dialogVisible.value = false
  formRef.value.open(type, id)
}
// 修改emit定义
const emits = defineEmits<{
  (e: 'success', value: any): void  // 修改为any或具体类型
}>()
const saveSelection = () => {
  if (currentRowId.value) {
    const selected = list.value.find((item) => item.id === currentRowId.value)
    if (selected) {
      emits('success', {
        productName: selected.productName,
        productCode: selected.productCode,
        categoryName: selected.categoryName,
        // 其他需要映射的字段...
      });
    }
  }
  dialogVisible.value = false;
};




// const saveSelection = () => {

//   if (currentRowId.value) {
//     const selected = list.value.find((item) => item.id === currentRowId.value)
//     if (selected) {
//       emits('success', selected)
//     }
//   }
//   dialogVisible.value = false
// }
/** 打开弹窗 */
const open = async (supplierId: number) => {
  dialogVisible.value = true
  await nextTick() // 等待，避免 queryFormRef 为空
  // 加载可入库的订单列表
  // queryParams.supplierId = supplierId
  // await resetQuery()
  // 加载产品列表
  // productList.value = await ProductApi.getProductSimpleList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗


const submitForm = () => {
  try {
    emits('success', selectionList.value)
  } finally {
    // 关闭弹窗
    dialogVisible.value = false
  }
}

/** 加载列表  */
const getList = async () => {
  loading.value = true
  try {
    // const data = await PurchaseInApi.getPurchaseInPage(queryParams)
    // list.value = data.list
    // total.value = data.total
    list.value = mockProductList
    total.value = mockProductList.length
  } finally {
    loading.value = false
  }
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  selectionList.value = []
  getList()
}
</script>
<style scoped>
.hidden-label-radio :deep(.el-radio__label) {
  display: none !important;
  width: 0;
  padding: 0;
}
</style>
